<template>
    <div class="keycode">
        <!-- 查询列表 -->
        <el-row class="keycode-list">
            <el-col :span="24">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    label="账号Id"
                    width="200"
                    prop="id">
                    </el-table-column>
                    <el-table-column
                    prop="username"
                    label="登录名"
                    width="220">
                    </el-table-column>
                    <el-table-column
                    prop="phone"
                    label="电话"
                    width="220">
                    </el-table-column>
                    <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="操作">
                        <template slot-scope="scope">
                        <el-popconfirm 
                        confirm-button-text='确认' 
                        cancel-button-text='取消' 
                        icon="el-icon-info" 
                        icon-color="red" 
                        title="确定恢复吗？"
                        @confirm="recoverAccount(scope.row.id)"
                        >
                          <el-button type="success" size="mini" slot="reference">恢复</el-button>
                        </el-popconfirm>
                      </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                        layout="prev, pager, next"
                        :total="pageHelp.total * 10"
                        @current-change="changeCurrentPage"
                        >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
let path = "http://localhost";
import axios from 'axios'
export default {
    data(){
        return {
            tableData:[],
            pageHelp:{
                currentPage : 1,
                perPageSize : 10,
            }
        }
    },
    methods:{
        //展示所有已注销的学生账号
        list(){
            axios({
                method:'POST',
                url:path+"/backstage/student/canceledAccount",
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },
                data:this.pageHelp
            }).then(res => {
                if(res.data.code === 500){
                    alert("您未有权限")
                }else if(res.data.code === 40100){
                    console.log(res.data.data);
                    this.tableData = res.data.data.list
                    this.pageHelp.total = res.data.data.pages
                }else{
                    alert("查询失败")
                }
            }).catch(error => {
                console.log(error);
            })
        },
        changeCurrentPage(currentPage){
            console.log(this.pageHelp.currentPage);
            this.pageHelp.currentPage = currentPage;
            axios({
                method: 'post',
                url:"http://localhost/backstage/student/canceledAccount",
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },
                data:this.pageHelp
            }).then(res => {
                console.log(res.data);
                if(res.data.code == 500){
                    alert("您的权限不足")
                }else if(res.data.code === 40100){
                    this.tableData = res.data.data.list
                    this.pageHelp.total = res.data.data.pages
                }else{
                    alert("查询失败")
                }
            }).catch(error => {
                console.log(error);
            })
        },
        //恢复账号
        recoverAccount(id){
            axios({
                method:'PUT',
                url:path+"/backstage/student/recoverAccount/"+id,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                console.log(res.data);
                if(res.data.code == 500){
                    alert("您的权限不足")
                }else if(res.data.code === 30100){
                    this.list();
                }else{
                    alert("恢复失败")
                }
            }).catch(error => {
                console.log(error);
            })
        }
    },
    created(){
        this.list()
    }
}
</script>

<style scoped>
.keycode{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.keycode-list{
    width: 100%;
    margin-bottom: 20px;
}
</style>